<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <title>经营决策报表</title>
  <style>
    html,
    body,
    ul,
    li,
    p {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    li {
      display: block;
    }

    img,
    canvas,
    video {
      vertical-align: middle;
    }

    html {
      background: #3c394a;
    }

    .tabbar {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }

    .tabbar-item {
      /* width: 50px;
      height: 50px; */
      border-radius: 100px;
      color: #fff;
      font-size: 13px;
      padding: 5px 10px;
      background-color: #9491c0;
    }

    .tabbar-item.active {
      background-color: #7971e9;
    }

    .tabbar-item-menu {
      background-color: #464358;
    }

    .wrap {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100vh - 60px);
    }

    .block {
      margin: 0 10px 10px;
      background: #fff;
      border-radius: 5px;
      padding: 10px;
    }

    .block .title {
      display: flex;
      align-items: center;
      margin: 5px 0;
    }

    .block .title .icon {
      width: 25px;
      height: 25px;
      background-color: #6f9ff2;
      border-radius: 50%;
    }

    .block .title .text {
      color: #888;
      font-size: 15px;
      margin-left: 5px;
    }

    .block .item {
      color: #222;
      font-size: 14px;
      padding-top: 10px;
      display: flex;
      align-items: center;
    }

    .block .item2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .block .item strong {
      font-size: 15px;
    }

    .block .item i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #229c73;
      margin: 0 10px 0 5px;
    }

    .block .updateTime {
      text-align: right;
      font-size: 14px;
      color: #9aa;
    }

    /* vue animation */

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }

    .fade-enter-to,
    .fade-leave {
      opacity: 1;
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: all .2s;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="tabbar">
      <div v-for="(item, index) in tabbar" :key="index" class="tabbar-item" :class="tabbarIndex === index ? 'active' : ''"
        @click="tabbarIndex = index">
        <!-- <img src="" alt=""> -->
        {{item.text}}
      </div>
      <!-- <div class="tabbar-item tabbar-item-menu">
        <img src="" alt="">
      </div> -->
    </div>
    <div class="wrap">
      <!-- 查看收入 -->
      <!-- <transition-group name="fade"> -->
      <template v-if="tabbarIndex === 0">
        <order-statistics :list="list" :tabbar-index="tabbarIndex" v-if="true"></order-statistics>
        <div v-if="false">
          <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
            <div class="title">
              <div class="icon">
                <img alt="">
              </div>
              <p class="text">{{item.company}}</p>
            </div>
            <div class="item">
              <i></i>
              <p>目标：
                <strong>{{item.income.target}}</strong>
              </p>
            </div>
            <div class="item">
              <i></i>
              <p>实际：
                <strong>{{item.income.reality}}</strong>
              </p>
            </div>
            <div class="item">
              <i></i>
              <p>回款：
                <strong>{{item.income.paymentCollectio}}</strong>
              </p>
            </div>
            <div class="updateTime">今天16:57更新</div>
          </div>
        </div>
      </template>
      <!-- 账号条数 -->
      <template v-if="tabbarIndex === 1">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>总条数：
              <strong>{{item.accounts.total}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>本地美食：
              <strong>{{item.accounts.deliciousFoods}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>综合乐活：
              <strong>{{item.accounts.entertainment}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>综合民生：
              <strong>{{item.accounts.livelihood}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- 利润完成 -->
      <template v-if="tabbarIndex === 2">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>利润目标：
              <strong>{{item.profit.target}}</strong>
            </p>
          </div>
          <div class="item">
            <i></i>
            <p>利润实际：
              <strong>{{item.profit.reality}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- 利润完成率 -->
      <template v-if="tabbarIndex === 3">
        <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <div class="title">
            <div class="icon">
              <img alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>百分比：
              <strong>{{item.profitRate.percentage}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      </template>
      <!-- </transition-group> -->
    </div>
  </div>
  <script>
    function fakeData() {
      return (Math.random() * 300 + 50).toFixed(2)
    }
    var Random = Mock.Random
    Random.extend({
      menusub: function (date) {
        var menuitems = ['客户统计', '投放统计', '利润统计', '回款统计']
        return this.pick(menuitems)
      }
    })
    var mockData = Mock.mock({
      'list|1-4': [{
        'company|1': '@menusub'
      }]
    })
    console.log(JSON.stringify(mockData, null, 4))

    var orderStatistics = `
    <div>
      <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
          <order-statistics-sub :item="item" v-if="index === 0"></order-statistics-sub>
          <release-statistics-sub :item="item" v-if="index === 1"></release-statistics-sub>
          <profit-statistics-sub v-if="index === 2" :item="item"></profit-statistics-sub>
          <returned-statistics-sub v-if="index === 3" :item="item"></returned-statistics-sub>
      </div>
    </div>`

    var orderStatisticsSub = `
      <div>
        <div class="title">
          <div class="icon">
            <img src="" alt="">
          </div>
          <p class="text">{{item.company}}</p>
        </div>
        <div class="item">
          <i></i>
          <div class="item2">
            <p>本月客户总数：
              <strong>{{item.income.target}}</strong>
            </p>
            <p>客户跟进次数：
              <strong>{{item.income.customerIncomeNum}}</strong>
            </p>
          </div>
        </div>
        <div class="item">
          <i></i>
            <div class="item2">
              <p>新客户数：
                <strong>{{item.income.reality}}</strong>
              </p>
              <p>老客户数：
                <strong>{{item.income.reality}}</strong>
              </p>
            </div>
        </div>
        <div class="item">
          <i></i>
          <p>媒介客户：
            <strong>{{item.income.paymentCollectio}}</strong>
          </p>
        </div>
        <div class="updateTime">今天16:57更新</div>
      </div>
    `
    var releaseStatisticsSub = `
      <div>
        <div class="title">
          <div class="icon">
            <img src="" alt="">
          </div>
          <p class="text">{{item.company}}</p>
        </div>
        <div class="item">
          <i></i>
          <p>本月目标：
            <strong>{{item.income.target}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.putIn">
          <i></i>
            <div class="item2">
              <p>本月投放：
                <strong>{{item.income.putIn}}</strong>
              </p>
              <p>完成率：
                <strong>{{item.income.putIn}}</strong>
              </p>
            </div>
        </div>
        <div class="item" v-if="item.income.currentMonthAmount">
          <i></i>
          <p>本月条数：
            <strong>{{item.income.currentMonthAmount}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.annualTarget">
          <i></i>
          <p>年度目标：
            <strong>{{item.income.annualTarget}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.annualPutIn">
          <i></i>
          <p>年度投放：
            <strong>{{item.income.annualPutIn}}</strong>
          </p>
        </div>
        <div class="updateTime">今天16:57更新</div>
      </div>
    `
    var profitStatisticsSub = `
      <div>
        <div class="title">
          <div class="icon">
            <img src="" alt="">
          </div>
          <p class="text">{{item.company}}</p>
        </div>
        <div class="item">
          <i></i>
          <p>本月目标：
            <strong>{{item.income.target}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.currentProfit">
          <i></i>
          <p>本月利润：
            <strong>{{item.income.currentProfit}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.annualTarget">
          <i></i>
          <p>年度目标：
            <strong>{{item.income.annualTarget}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.annualProfit">
          <i></i>
          <p>年度利润：
            <strong>{{item.income.annualProfit}}</strong>
          </p>
        </div>
        <div class="updateTime">今天16:57更新</div>
      </div>
    `
    var returnedStatistics = `
      <div>
        <div class="title">
          <div class="icon">
            <img src="" alt="">
          </div>
          <p class="text">{{item.company}}</p>
        </div>
        <div class="item">
          <i></i>
          <p>回款目标：
            <strong>{{item.income.target}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.money">
          <i></i>
          <p>回款金额：
            <strong>{{item.income.money}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.refund">
          <i></i>
          <p>退款总数：
            <strong>{{item.income.refund}}</strong>
          </p>
        </div>
        <div class="item" v-if="item.income.annualPutIn">
          <i></i>
          <p>年度利润：
            <strong>{{item.income.annualPutIn}}</strong>
          </p>
        </div>
        <div class="updateTime">今天16:57更新</div>
      </div>
    `

    // Vue.component('order-a', {
    //   props: ['list'],
    //   template: orderStatistics
    // })
    Vue.component('orderStatisticsSub', {
      props: ['item'],
      template: orderStatisticsSub
    })
    Vue.component('releaseStatisticsSub', {
      props: ['item'],
      template: releaseStatisticsSub
    })
    Vue.component('profitStatisticsSub', {
      props: ['item'],
      template: profitStatisticsSub
    })
    Vue.component('returnedStatisticsSub', {
      props: ['item'],
      template: returnedStatistics
    })
    var vm = new Vue({
      el: '#app',
      components: {
        'orderStatistics': {
          props: ['list', 'tabbarIndex'],
          template: orderStatistics
        },
      },
      data() {
        return {
          lists: [{
            name: 'a',
            content: '1',
          },
          {
            name: 'b',
            content: '2',
          }],
          postTitle: '111',
          tabbarIndex: 0,
          tabbar: [{
            color: '#7971e9',
            text: '查看收入'
          },
          {
            color: '#60aef8',
            text: '账号条数'
          },
          {
            color: '#60aef8',
            text: '利润完成'
          },
          {
            color: '#7971e9',
            text: '利润完成率'
          }
          ],
          list: [{
            company: '客户统计',
            income: {
              target: fakeData(),
              customerIncomeNum: fakeData(),
              reality: fakeData(),
              paymentCollectio: fakeData(),
            },
            accounts: {
              total: parseInt(Math.random() * 100),
              deliciousFoods: fakeData(),
              entertainment: fakeData(),
              livelihood: fakeData(),
            },
            profit: {
              target: fakeData(),
              reality: fakeData(),
            },
            profitRate: {
              percentage: parseInt(Math.random() * 100) + '%'
            }
          },
          {
            company: '投放统计',
            income: {
              target: fakeData(),
              reality: fakeData(),
              paymentCollectio: fakeData(),
              putIn: fakeData(),
              currentMonthAmount: fakeData(),
              annualTarget: fakeData(),
              annualPutIn: fakeData()
            },
            accounts: {
              total: parseInt(Math.random() * 100),
              deliciousFoods: fakeData(),
              entertainment: fakeData(),
              livelihood: fakeData(),
            },
            profit: {
              target: fakeData(),
              reality: fakeData(),
            },
            profitRate: {
              percentage: parseInt(Math.random() * 100) + '%'
            }
          },
          {
            company: '利润统计',
            income: {
              target: fakeData(),
              reality: fakeData(),
              paymentCollectio: fakeData(),
              currentProfit: fakeData(),
              annualTarget: fakeData(),
              annualProfit: fakeData()
            },
            accounts: {
              total: parseInt(Math.random() * 100),
              deliciousFoods: fakeData(),
              entertainment: fakeData(),
              livelihood: fakeData(),
            },
            profit: {
              target: fakeData(),
              reality: fakeData(),
            },
            profitRate: {
              percentage: parseInt(Math.random() * 100) + '%'
            }
          },
          {
            company: '回款统计',
            income: {
              target: fakeData(),
              reality: fakeData(),
              paymentCollectio: fakeData(),
              money: fakeData(),
              refund: fakeData(),
            },
            accounts: {
              total: parseInt(Math.random() * 100),
              deliciousFoods: fakeData(),
              entertainment: fakeData(),
              livelihood: fakeData(),
            },
            profit: {
              target: fakeData(),
              reality: fakeData(),
            },
            profitRate: {
              percentage: parseInt(Math.random() * 100) + '%'
            }
          }
          ]
        }
      },
      mounted: function () {
        console.log('mounted')
      }
    })
  </script>
</body>

</html>